<script lang="tsx">
import { getHeaderMenuList } from './helper'
import { defineComponent, ref } from 'vue'
import { Icon } from '@/components/Icon'
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
export default defineComponent({
  name: 'Headermeun',
  setup() {
    const menuList = ref(getHeaderMenuList())
    const size = 20
    const moreMenu = [
      {
        title: '更多',
        icon: 'ep:notebook'
      },
      {
        title: '更多1',
        icon: 'ep:platform'
      },
      {
        title: '更多2',
        icon: 'ep:checked'
      },
      {
        title: '更多3',
        icon: 'ep:menu'
      }
    ]
    return () => (
      <div class="header-menu">
        {menuList.value.map((item) => {
          if (item.title === '更多') {
            return (
              <ElDropdown
                style="height:40px;color:#fff;border:none"
                v-slots={{
                  dropdown: () => (
                    <ElDropdownMenu style="width:330px;display:flex;flex-wrap:wrap;align-item:flex-start;justify-content: space-between;">
                      {moreMenu.map((item) => {
                        return (
                          <ElDropdownItem style="width:100px;height:100px">
                            <div class="moremenu">
                              <Icon size={50} color="#f70" icon={item.icon} />
                              {item.title}
                            </div>
                          </ElDropdownItem>
                        )
                      })}
                    </ElDropdownMenu>
                  )
                }}
              >
                <div class="custom-hover header-item" color="var(--top-header-text-color)">
                  <Icon size={size} color="#fff" icon={item.icon} />
                  <div class="header-title">{item.title}</div>
                </div>
              </ElDropdown>
            )
          }
          return (
            <div class="custom-hover header-item" color="var(--top-header-text-color)">
              <Icon size={size} color="#fff" icon={item.icon} />
              <div class="header-title">{item.title}</div>
            </div>
          )
        })}
      </div>
    )
  }
})
</script>
<style lang="less" scoped>
.header-menu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
  color: #fff;

  .header-title-selected {
    color: #409eff;
  }

  .header-item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-left: 20px;
    cursor: pointer;

    .header-title {
      margin-right: 20px;
      margin-left: 10px;
    }
  }
}

.moremenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
